<template>
	<div class="index">

		<!-- 上拉加载 && 下拉刷新 -->
		<van-list v-if="allList&&allList.length>0" v-model="isUpLoading" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
			<div class="index-list_box m-l-10 m-r-10">
				<div class="item bg-white m-t-10 radius8 p-tb-12 p-lr-12" v-for="(item, index) in allList" :key="index">
					<div class="flex justify-between font-12 align-center">
						订单号：{{ item.order_no }}
						<div class="flex align-center"
							:class="item.status == 0 ? 'color-red' : item.status == -1 ? 'color-9' : 'color-green'">
							{{ item.status == -1 ? '已取消' : item.status == 0 ? '待支付' : '已支付' }}<span
								class="flex align-center"
								v-if="item.status == 0 && item.end_time > 0 && (item.end_time - new Date().valueOf() / 1000) > 0">(<van-count-down
									class="color-red" :time="(item.end_time - new Date().valueOf() / 1000) * 1000"
									@finish="countEnd(item)" />)</span> </div>
					</div>
					<div class="font-13 flex justify-between align-center m-t-10 b-t p-t-10">
						<div class="color-red">金额：￥{{ item.amount }}</div>
						<div>支付方式：{{ item.pay_type_text }}</div>
					</div>
					<div class="font-13 m-t-10 color-9" v-if="item.pay_time">支付时间：{{ item.pay_time_text }}</div>
					<div class="font-13 m-t-10 color-9" v-if="item.refund_time">退款时间：{{ item.pay_time_text }}</div>
					<div class="flex justify-between font-12 align-center " :class="item.status == 0 ? 'm-t-20' : 'm-t-10'">
						<div class="color-9">创建时间：{{ item.createtime | formateTime }}</div>
						<div class="pay-btn" @click="buy(item, index)" v-if="item.status == 0">支付</div>
					</div>
				</div>
			</div>
			<div class="pad-lr pad-b bg-gray">
				<van-skeleton :loading="isLoadingSkeleton" avatar :row="4" v-for="i in 6" :key="i" />
			</div>
		</van-list>
        <noData v-else text="暂无记录" />

		<!-- 回到顶部 -->
		<!-- <backtop /> -->
		<pay-popup v-if="showPopup" :popup-visible.sync="showPopup" :type="payStatus" @confrim="payConfrim" />
		<backTop />
	</div>
</template>

<script>
import { List, Skeleton, PullRefresh, CountDown } from 'vant'
import PayPopup from '@/components/PayPopup.vue'
export default {
    components: {
        [List.name]: List,
        [Skeleton.name]: Skeleton,
        [PullRefresh.name]: PullRefresh,
        [CountDown.name]: CountDown,
        PayPopup
    },
    data () {
        return {
            isLoadingSkeleton: true,
            finished: false, // 控制在页面往下移动到底部时是否调用接口获取数据
            isUpLoading: false, // 上拉加载
            isDownLoading: false, // 下拉刷新
            allList: [],
            status: '',
            order_no: '',
            page: 1,
            showPopup: false,
            payStatus: 0, // 支付结果，0=失败，1=成功
            orderIndex: null
        }
    },
    mounted () {
        this.$common.setHeader({
            native_headershow: 1,
            titleName: '开通记录',
            topstyle: 'topcolor',
            native_top_words_color: '#333333',
            str_link_color: '#ffffff',
            end_link_color: '#ffffff'
        })
        this.getList('refresh')
    },
    methods: {
        getList (type) {
            if (type) {
                this.DS.call('DS.showLoading')
                this.isLoadingSkeleton = true
                this.finished = false
                this.isUpLoading = true
                this.finished = false
                this.page = 1
            }
            this.$api.userOrder({
                page: this.page,
                page_size: 20,
                status: this.status
            }).then(res => {
                console.log(res)
                this.DS.call('DS.hideLoading')
                this.isLoadingSkeleton = false
                if (res.code == 1) {
                    if (this.isFirst) {
                        this.isFirst = false
                    }

                    this.isDownLoading = false
                    let list = res.data.list
                    this.allList = [...this.allList, ...list]
                    this.isUpLoading = false
                    this.page++
                    if (list.length === 0) {
                        this.finished = true
                    }
                } else {
                    this.DS.call('DS.showToast', res.msg)
                }
            })
        },
        onLoadMore () {
            this.getList()
        },
        tabChange () {
            if (!this.allList.length) {
                this.getList('refresh')
            }
        },
        back () {
            this.$router.go(-1)
        },
        buy (item, index) {
            let params = {
                pay_type: item.pay_type,
                id: item.id
            }
            this.orderIndex = index
            if (item.pay_type == 'credit') {
                // // 检测是否设置支付密码
                // this.$api.getPayPasswordStatus().then(res => {
                //     if (res.code != 1) {
                //         return this.$toast(res.msg)
                //     }
                //     if (res.data.status == 1) {
                //         this.DS.call('DS.payInputPwd', {
                //             payPwdContent: `${this.config.mac_title}${this.payInfo.name}`,
                //             payPwdMoney: Number(this.payInfo.diy_price)
                //         }, (ret) => {
                //             this.$set(params, 'pay_password', ret)
                //             this.$api.orderPayData(params).then(res => {
                //                 console.log('pay, ', res)
                //                 if (res.code != 1) {
                //                     return this.$toast(res.msg)
                //                 }
                //                 this.showPay = false
                //                 this.payStatus = 1
                //                 this.showPopup = true
                //                 this.allList[this.orderIndex].status = 1
                //             })
                //         })
                //     } else {
                //         this.$toast('请先设置支付密码')
                //         setTimeout(() => {
                //             this.DS.call('DS.openPage', {
                //                 page: 'EditPayPwdPage'
                //             })
                //         }, 800)
                //     }
                // })
            } else {
                this.$api.orderPayData(params).then(res => {
                    if (res.code != 1) {
                        return this.$toast(res.msg)
                    }
                    let obj = {
                        payType: item.pay_type == 'alipay' ? 1 : 2
                    }
                    if (obj.payType == 1) {
                        this.$set(obj, 'aliOrderStr', res.data.pay_data)
                    } else {
                        this.$set(obj, 'orderStr', res.data.pay_data)
                    }
                    this.nativePay(obj)
                })
            }
        },
        nativePay (params) {
            this.DS.call('DS.payInfo', params, (res) => {
                this.payStatus = res
                this.showPay = false
                this.showPopup = true
                if (res == 1) {
                    this.allList[this.orderIndex].status = 1
                }
            })
        },
        payConfrim () {
            this.showPopup = false
        },
        countEnd (item) {
            item.status = -1
        }
    }
}
</script>
<style lang="less" scoped>
.pay-btn {
	border-radius: 30px;
	background-image: linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);
	padding: 2px 0;
	width: 60px;
	text-align: center;
	font-size: 11px;
	color: #fff;
}</style>

